<template>
  <div class="count">
    <h2>当前的结果为 {{countStore.sum}}</h2>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add">加</button>
    <button @click="minus">减</button>
  </div>

</template>
<!--margin 是设置 select,button这几个元素的间隔-->
<!--height设置按钮的高，  在style里 .count 表示 上面的div要用他就class="count" ，不带点就表示调整的是标签-->


<script setup lang="ts" name="Count">
import {reactive, ref} from "vue";
import {useCountStore} from "@/store/count.ts"
import {storeToRefs} from "pinia";
const countStore = useCountStore()
//两种方式都可以获取到state中的数据 sum
console.log("@@@@",countStore.sum)
console.log("@@@",countStore.$state.sum)
const {sum,bigSum} = storeToRefs(countStore)
let n = ref(1)
// let sum = ref(1)

function add() {
  countStore.sum = countStore.sum + n.value
  console.log(sum.value)
  console.log(bigSum)
}

function minus() {
  countStore.sum = countStore.sum - n.value
  console.log(sum.value)
  console.log(bigSum)
}
countStore.$subscribe((mutation,state)=>{
  console.log("$subscribe被触发")
  console.log("发生了什么事件")
  console.log(mutation)
  console.log("数据变化了")
  console.log(state)
  // 将结果存到localStorage里，放本地缓存，用于下一次使用
  localStorage.setItem(sumResult,sum)
})
</script>
<style scoped>
.count {
  background-color: skyblue;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px;
}

select, button {
  margin: 0 20px;
  height: 30px;
}
</style>